<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="UTF-8">
	<title>-webkit-align-self | CtripUED Webkit CSS Library</title>
	
	<script type="text/javascript" src="base.js"></script>

<link rel="stylesheet" type="text/css" href="align-self.css" media="all">
</head>
<body>
<div class="head">
	<div class="wrap">
		<a href="http://ued.ctrip.com/blog/wp-content/webkitcss/index.html" class="logo">CtripUED webkit CSS library</a>
		<div class="nav">
			<ul>
				<li><a href="http://ued.ctrip.com/blog/wp-content/webkitcss/index.html">首页</a></li>
				<li><a href="http://ued.ctrip.com/blog/wp-content/webkitcss/aboutus.html#about">关于我们</a></li>
				<li><a href="http://ued.ctrip.com/blog/wp-content/webkitcss/aboutus.html#about_box">意见反馈</a></li>
				<li><a href="http://ued.ctrip.com/">CtripUED 博客</a></li>
			</ul>
		</div>
	</div>
</div>
<div class="wrap">
	<div class="side">
		<div class="filter_box">
			<div class="field" id="catalogFilter">
					<input id="key" placeholder="属性搜索..." type="search">
			</div>
		</div>
		<div class="categorys"></div>
	</div>

	<div class="main" id="main">
		<div class="position" id="position">
			您的位置: <a href="http://ued.ctrip.com/blog/wp-content/webkitcss/index.html">首页</a> &gt; -webkit-align-self
		</div>
		<!-- /position -->
		<div class="prop_intro">
			<div class="tit">
				<h1>-webkit-align-self 属性</h1>
			</div>
			<div class="prop_detail">
				<p>基于Flex布局，用来指定<span class="ex">多行伸缩容器的对齐</span>。align-self 可以让你为单独的伸缩子元素设置 align-items 的行为，会覆盖 align-items。</p>
			</div>
			<!-- /prop_detail -->
			<div class="prop_comp">
				<p>
					<i class="ico_browser ico_browser_saf_no"><small>×</small></i>
					<i class="ico_browser ico_browser_chr"><small>21+</small></i>
					<i class="ico_browser ico_browser_and_no"><small>×</small></i>
					<i class="ico_browser ico_browser_ios_no"><small>×</small></i>
				</p>
			</div>
			<!-- /prop_comp -->
			<!-- Baidu Button BEGIN -->
			<!-- Baidu Button BEGIN -->

		</div>
		<!-- /prop_intro -->
		<div class="mod prop_gramm">
			<h2 class="mod_tit">语法</h2>
			<p class="mod_con">
				<strong>-webkit-align-self:</strong> flex-start | flex-end | center | stretch | baseline
			</p>
		</div>
		<!-- /prop_gramm -->
		<div class="mod prop_value">
			<h2 class="mod_tit">取值</h2>
			<div class="mod_con">
				<table>
					<tbody><tr>
						<th>flex-start</th>
						<td>将所有项目对着侧轴的起始方向对齐</td>
					</tr>
					<tr>
						<th>flex-end</th>
						<td>将所有项目对着侧轴的结尾方向对齐</td>
					</tr>
					<tr>
						<th>center</th>
						<td>将所有项目对着侧轴的中心对齐</td>
					</tr>
					<tr>
						<th>stretch</th>
						<td>将所有项目伸长，让项目占据了整个侧轴的长度。如果侧轴长度属性的值为「auto」，则此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。注：注意：如果伸缩伸缩的高度有限制，此可能导致伸缩项目的内容溢出该项目。伸缩项目在侧轴起点边的外边距会紧靠住该行在侧轴起点的边。</td>
					</tr>
					<tr>
						<th>baseline</th>
						<td>如果伸缩项目的行内轴与侧轴为同一条，则该值与「flex-start」等效。 其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边</td>
					</tr>
				</tbody></table>
			</div>
		</div>
		<!-- /prop_value -->
		<div class="mod prop_demo">
			<h2 class="mod_tit">示例</h2>
			<div class="mod_con">
				<iframe id="iframedemo" style="border: 1px solid rgb(204, 204, 204);" src="align-self_1.html" width="100%" frameborder="0" height="400"></iframe>
				<div class="btns">
					<a href="http://ued.ctrip.com/blog/wp-content/webkitcss/demo/align-self.html" target="_top" class="btn_primary">演示</a>
				</div>

			</div>
		</div>
		<!-- /prop_demo -->
	</div>
	<!-- /main -->
</div>
<!-- /wrap -->

</body>
</html>
